<template>
	<div class="app-container dispatchCase">
		<el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
			<el-form-item label="病例编号" prop="dispatchCaseID">
				<el-input v-model="queryParams.dispatchCaseID" placeholder="请输入病例编号" clearable size="small" @keyup.enter.native="handleQuery" style="width: 140px;" />
			</el-form-item>
			<el-form-item label="状态" prop="caseStatus">
				<el-select v-model="queryParams.caseStatus" placeholder="请选择状态" clearable size="small">
					<el-option v-for="dict in caseStatusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
				</el-select>
			</el-form-item>
			<el-form-item label="患者姓名" prop="patientName">
				<el-input v-model="queryParams.patientName" placeholder="请输入患者姓名" clearable size="small" @keyup.enter.native="handleQuery" style="width: 140px;" />
			</el-form-item>
			<el-form-item label="出车时间" prop="lastDispatchTime" size="small" label-width="150px;">
				<el-date-picker
					type="daterange"
					v-model="lastDispatchTime"
					format="yyyy-MM-dd"
					size="small"
					value-format="yyyy-MM-dd"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					@change="handleChangeTime"
					range-separator="至"
					clearable
				></el-date-picker>
			</el-form-item>
			<el-form-item label="医生姓名" prop="doctorName">
				<el-input v-model="queryParams.doctorName" placeholder="请输入医生姓名" clearable size="small" @keyup.enter.native="handleQuery" style="width: 140px;" />
			</el-form-item>
			<el-form-item label="身份证号" prop="patientCard">
				<el-input v-model="queryParams.patientCard" placeholder="请输入身份证号" clearable size="small" @keyup.enter.native="handleQuery" style="width: 140px;" />
			</el-form-item>
			<el-form-item label="急救车牌" prop="vin">
				<el-input v-model="queryParams.vin" placeholder="请输入急救车牌" clearable size="small" @keyup.enter.native="handleQuery" style="width: 140px;" />
			</el-form-item>
			<el-form-item label="是否会诊" prop="consultationMark">
				<el-select v-model="queryParams.consultationMark" placeholder="请选择会诊状态" clearable size="small">
					<el-option v-for="dict in consultationMarks" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table v-loading="loading" :data="dispatchCaseList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="病例编号" align="center" prop="dispatchCaseID">
				<template slot-scope="scope">
					<span style="color:#409eff">{{ scope.row.dispatchCaseID }}</span>
				</template>
			</el-table-column>
			<el-table-column label="状态" align="center" prop="caseStatus" :formatter="caseStatusFormat" />
			<!-- <el-table-column label="患者标识" align="center" prop="patientId" /> -->
			<el-table-column label="患者姓名" align="center" prop="patientName" />
			<el-table-column label="患者性别" align="center" prop="patientSex" :formatter="patientSexFormat" />
			<el-table-column label="患者年龄" align="center" prop="patientAge" />
			<el-table-column label="身份证号码" align="center" prop="patientCard" width="200" />
			<!--      <el-table-column
        label="患者住址"
        align="center"
        prop="patientAddress"
        width="160"
      />-->
			<!-- <el-table-column label="调度标识" align="center" prop="dispatchID" /> -->
			<el-table-column label="医生姓名" align="center" prop="doctorName" />
			<el-table-column label="出车时间" align="center" prop="time" width="180">
				<template slot-scope="scope">
					<span>{{ parseTime(scope.row.time) == undefined ? '暂未出车' : parseTime(scope.row.time) }}</span>
				</template>
			</el-table-column>
			<!-- <el-table-column label="填写状态" align="center" prop="formStatus" /> -->
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
				<template slot-scope="scope">
					<el-button size="mini" type="text" @click="handleUpdate(scope.row)">查看详情</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
		<!-- 添加或修改调度病例详细信息对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="94%" append-to-body height="70vh">
			<div style="height: 78vh;overflow: auto;">
				<div class="con-wind">
					<div class="con-sher con-heade-text">
						<el-row>
							<el-col :span="6">
								<span>{{ dispatch.flow }}</span>
								<span>会诊</span>
							</el-col>
							<el-col :span="6">
								<span>{{ patientInfo.name }}</span>
								<span>{{ patientInfo.sex == '0' ? '未知' : patientInfo.sex == '1' ? '男' : '女' }}</span>
								<span>{{ patientInfo.age }}岁</span>
							</el-col>
							<el-col :span="6">
								<span>{{ patientInfo.receiveNoticeTime }}</span>
							</el-col>
							<el-col :span="6">
								<span>{{ dispatch.vin }}</span>
								<span>{{ dispatch.doctorName }}</span>
								<span>{{ dispatch.bizNurse.name }}</span>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="6">
								<span>发病地点：{{ patientInfo.patientLocal }}</span>
							</el-col>
							<el-col :span="6">
								<span>收治医院：{{ patientInfo.hospital }}</span>
							</el-col>
							<el-col :span="6"><span></span></el-col>
							<el-col :span="6">
								<el-button type="primary" size="mini" class="btn-draft-lev" round>{{ caseStatusFormat(this.form) }}</el-button>
							</el-col>
						</el-row>
					</div>
					<div class="con-list">
						<div class="ul">
							<div class="title">
								<div class="p">
									<span class="p-before"></span>
									患者信息
								</div>
							</div>
							<div class="lip">
								患者姓名
								<span>{{ this.form.patientName }}</span>
							</div>
							<div class="lip">
								患者性别
								<span>{{ this.form.patientSex == '0' ? '未知' : this.form.patientSex == '1' ? '男' : '女' }}</span>
							</div>
							<div class="lip">
								患者年龄
								<span>{{ this.form.patientAge }}</span>
							</div>
							<div class="lip">
								身份证号码
								<span>{{ patientInfo.patientCard }}</span>
							</div>
							<div class="lip">
								联系方式
								<span>{{ this.form.patientMobile }}</span>
							</div>
							<div class="lip">
								家庭地址
								<span>{{ this.form.patientAddress }}</span>
							</div>
						</div>
						<div class="ul">
							<div class="title">
								<div class="p">
									<span class="p-before"></span>
									病例概览
								</div>
							</div>
							<div class="lip">
								主诉
								<span>{{ this.form.majorCase }}</span>
							</div>
							<div class="lip">
								初步诊断
								<span>{{ this.form.baseHelp }}</span>
							</div>
						</div>
						<div class="ul">
							<div class="title">
								<div class="p">
									<span class="p-before"></span>
									病例概览
								</div>
							</div>
							<div class="lip">
								现病史
								<span>{{ this.form.medicineNow }}</span>
							</div>
							<div class="lip" style="clear:both;">
								既往史
								<span>{{ this.form.treatmentRecord }}</span>
							</div>
							<div class="lip" style="clear:both;">
								过敏史
								<span>{{ this.form.medicineSensitive }}</span>
							</div>
							<div class="lip lip1" style="clear:both;">
								GCS评分
								<b class="btn-text">{{ this.form.gcsScore }}</b>
								<el-button type="text" @click="dialogVisible1 = true" class="ckxq">查看详情》</el-button>
								<el-dialog title="GCS评分" :visible.sync="dialogVisible1" width="550px" append-to-body>
									<!-- :before-close="handleClose" -->
									<div style="height:350px;overflow: hidden;">
										<div class="left gcs-cont" style="overflow: hidden;margin-top: 10px;">
											<div style="float:left">
												<div style="font-size: 18px;line-height: 18px;height: 40px;">{{ gcsAnswers[0].value }}</div>
												<el-radio
													class="radio"
													v-for="(item, index) in gcsAnswers[0].child"
													v-model="gcsAnswers[0].answer"
													:label="item.id"
													:disabled="gcsAnswers[0].answer != item.id"
                          :key="index"
												>
													{{ item.value }}
												</el-radio>
											</div>
											<div style="float:left">
												<div style="font-size: 18px;line-height: 18px;height: 40px;">{{ gcsAnswers[1].value }}</div>
												<el-radio
													class="radio"
													v-for="(item, index) in gcsAnswers[1].child"
													v-model="gcsAnswers[1].answer"
													:label="item.id"
													:disabled="gcsAnswers[1].answer != item.id"
                          :key="index"
												>
													{{ item.value }}
												</el-radio>
											</div>
											<div style="float:left">
												<div style="font-size: 18px;line-height: 18px;height: 40px;">{{ gcsAnswers[2].value }}</div>
												<el-radio
													class="radio"
													v-for="(item, index) in gcsAnswers[2].child"
													v-model="gcsAnswers[2].answer"
													:label="item.id"
													:disabled="gcsAnswers[2].answer != item.id"
                          :key="index"
												>
													{{ item.value }}
												</el-radio>
											</div>
										</div>
										<!-- <div style="font:10px;color:black;">
											<el-radio v-for="(item, index) in gcsAnswers[0].child" :key="index" v-model="item.value" class="radio1" label="1">自发睁眼</el-radio>
											<el-radio v-model="radio" class="radio2" label="2">回答正确</el-radio>
											<el-radio v-model="radio" class="radio3" label="2">遵命动作</el-radio>
										</div> -->
										<div class="button1">
											<p style="float:left;color: #409EFF;">总分计算</p>
											<p style="float:left;">{{ gcsAnswersNuber }}</p>
										</div>
									</div>
									<span slot="footer" class="dialog-footer"></span>
								</el-dialog>
							</div>
							<div class="lip">
								卒中NHISS评分
								<b class="btn-text">{{ this.form.nhissScore }}</b>
								<el-button type="text" @click="dialogVisible2 = true" class="ckxq">查看详情》</el-button>
								<el-dialog title="卒中NHISS评分" :visible.sync="dialogVisible2" append-to-body width="1200px">
									<div style="height:450px;overflow:hidden;">
										<div class="pfx">
											<div>评分项</div>
											<div>评分标准</div>
											<div>分数</div>
										</div>
										<div style="height: 350px;overflow: auto;">
											<div class="pfxs" v-for="(item, index) in nhissAnswers" :key="index">
												<el-popover placement="bottom" title="" width="200" trigger="hover">
													{{ item.value }}
													<div class="pfxs-list-box" slot="reference">{{ item.value }}</div>
												</el-popover>

												<el-popover placement="bottom" title="" width="200" trigger="hover">
													{{ item.child | nhissAnswersFilter(item.answer, 1) }}
													<div class="pfxs-list-box" slot="reference">{{ item.child | nhissAnswersFilter(item.answer, 1) }}</div>
												</el-popover>
												<div class="pfxs-list-box">{{ item.child | nhissAnswersFilter(item.answer, 2) }}</div>
											</div>
										</div>
										<div class="button1">
											<p style="float:left;color: #409EFF;">总分计算</p>
											<p style="float:left;">{{ nhissAnswersNum }}</p>
										</div>
									</div>
									<span slot="footer" class="dialog-footer"></span>
								</el-dialog>
							</div>
						</div>
						<div class="ul">
							<div class="title">
								<div class="p">
									<span class="p-before"></span>
									设备数据
								</div>
							</div>
							<div class="lip">
								心电监护仪
								<el-button type="text" @click="palyerDetail(1), dialogVisible3 = true, playSetInterval()" class="ckxq">查看详情》</el-button>
								<el-dialog title="心电监护仪" customClass="customWidth" :visible.sync="dialogVisible3" @close="closeDialog" style="margin:0 auto;" append-to-body width="90%" :before-close="handleClose">
									<div style="height:800px;">
										<div style="height: 700px;overflow: hidden;background:#00184c;">
											<iframe
												id="xindian"
												ref="xindian"
												:src="xindian"
												frameborder="0"
												style="height:900px;box-sizing: border-box;transform:scaleY(.8);margin:-95px 0 0 0"
											></iframe>
										</div>
										<!-- <button @click="onxindian">1212</button> -->
										<div class="xindain-footer">
											<img src="../../../assets/image/slider1.png" v-if="Slider == true" @click="onSlider(1, 0)" alt="" />
											<img src="../../../assets/image/slider2.png" v-if="Slider == false" @click="onSlider(2, 0)" alt="" />
											<div class="xindain-footer-slider">
												<div class="palyTime">{{ hh }}：{{ mm }}：{{ ss }}</div>
												<el-slider
													class="palySlider"
													v-model="slider"
													:step="1"
													:max="maxTime"
													:format-tooltip="formatTooltip"
													@change="sliderChange(1)"
												></el-slider>
												<div class="palyTime">{{ endTime }}</div>
											</div>
										</div>
									</div>
								</el-dialog>
								<span class="btn-text"></span>
							</div>
							<div class="lip">
								呼吸机
								<el-button type="text" @click="palyerDetail(2), dialogVisible4 = true, playSetInterval()" class="ckxq">查看详情》</el-button>
								<span class="btn-text"></span>
							</div>
							<div class="lip">
								超声设备
								<el-button type="text" @click="(dialogVisible5 = true), onplayer()" class="ckxq">查看详情》</el-button>
								<span class="btn-text"></span>
							</div>
								<div class="lip">
								心电图机
								<el-button type="text" @click="(dialogVisible6 = true), onplayer()" class="ckxq">查看详情》</el-button>
								<span class="btn-text"></span>
							</div>
						</div>
						<div class="ul">
							<div class="title">
								<div class="p">
									<span class="p-before"></span>
									会诊记录
								</div>
							</div>
							<div class="pew-img">
								<!-- 		<div class="img-max"><img :src="previewUrl" /></div>
								<div class="img-min">
									<div class="li" v-for="item in picturePreview" :key="item"><img :src="item" @click="getPreview(item)" /></div>
								</div> -->

								<div style="height:800px"><video id="videoElements" controls width="1460" height="720" :src="hsVideoUrls" muted="muted">xxx</video></div>
							</div>
						</div>
						<div class="ul">
							<div class="title">
								<div class="p">
									<span class="p-before"></span>
									急救时间记录
								</div>
							</div>
							<div class="set-p">
								<el-steps :active="dispatch.status">
									<el-step title="接警" icon="el-icon-picture" :description="dispatch.receiveHelpTime"><i class="step00" slot="icon"></i></el-step>
									<el-step title="出车" icon="el-icon-picture" :description="dispatch.leaveHospTime"><i class="step01" slot="icon"></i></el-step>
									<el-step title="通话指导" icon="el-icon-picture" :description="dispatch.guideStart"><i class="step02" slot="icon"></i></el-step>
									<el-step title="达到现场" icon="el-icon-picture" :description="dispatch.arriveDestTime"><i class="step03" slot="icon"></i></el-step>
									<el-step title="上车转运" icon="el-icon-picture" :description="dispatch.leaveDestTime"><i class="step04" slot="icon"></i></el-step>
									<el-step title="发起会诊" icon="el-icon-picture" :description="dispatch.treatStart"><i class="step05" slot="icon"></i></el-step>
									<!--                <el-step title="溶栓开始" icon="el-icon-picture" description="">
                  <i class="step07" slot="icon"></i>
                </el-step>
                <el-step title="溶栓结束" icon="el-icon-picture" description="">
                  <i class="step08" slot="icon"></i> -->
									<!--                </el-step>-->
									<el-step title="到达医院" icon="el-icon-picture" :description="dispatch.arriveHostTime"><i class="step08" slot="icon"></i></el-step>
								</el-steps>
							</div>
						</div>
						<div class="ul">
							<div class="title">
								<div class="p">
									<span class="p-before"></span>
									费用结算
								</div>
							</div>
							<div class="lip">
								车费
								<span>¥{{ trade.carFee }}</span>
							</div>
							<div class="lip">
								检车费
								<span>¥{{ trade.checkCarFee }}</span>
							</div>
							<div class="lip">
								药品费
								<span>¥{{ trade.medicineFee }}</span>
							</div>
						</div>
					</div>
					<div class="ul-fte">
						<div class="p-text-left">
							<span>合计</span>
							<span>¥0.00</span>
						</div>
						<div class="p-text-right">
							<span>结算方式</span>
							<span>{{ trade.status == '1' ? '未结算' : '已结算' }}</span>
						</div>
					</div>
				</div>
				<!--      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">关闭</el-button>
      </span> -->
			</div>
		</el-dialog>
		<el-dialog title="呼吸机" :visible.sync="dialogVisible4" @close="closeDialog" width="1600px" style="margin:0 auto" append-to-body  :before-close="handleClose">
			<div style="height:800px;">
				<div style="width: 100%;height: 700px;overflow: hidden;background: #00184C;">
					<iframe id="huxi" :src="huxi" frameborder="0" style="height: 600px;transform: scale(1.1) scaleY(1.4);box-sizing:border-box ;margin: 14% 0 0 8%;"></iframe>
				</div>
				<div class="xindain-footer">
					<img src="../../../assets/image/slider1.png" v-if="Slider == true" @click="onSlider(1, 1)" alt="" />
					<img src="../../../assets/image/slider2.png" v-if="Slider == false" @click="onSlider(2, 1)" alt="" />
					<div class="xindain-footer-slider">
						<div class="palyTime">{{ hh }}：{{ mm }}：{{ ss }}</div>
						<el-slider class="palySlider" v-model="slider" :step="1" :max="maxTime" :format-tooltip="formatTooltip" @change="sliderChange(2)"></el-slider>
						<div class="palyTime">{{ endTime }}</div>
					</div>
				</div>
			</div>
		</el-dialog>
		<el-dialog title="便携超声仪" style="margin:0 auto" @close="closeDialog" :visible.sync="dialogVisible5" width="1500px">
			<div style="height:800px"><video id="videoElement" controls width="1460" height="720">xxx</video></div>
		</el-dialog>
		<el-dialog title="心电图机" style="margin:0 auto" @close="closeDialog" :visible.sync="dialogVisible6" width="1500px">
			<div>
				<iframe :src="`http://172.17.20.37/12d/12d.html?dispatchId=${this.dispatchID}`" frameborder="0"></iframe>
			</div>


		</el-dialog>
	</div>
</template>
<script>
import {
	listDispatchCase,
	getDispatchCase,
	delDispatchCase,
	addDispatchCase,
	updateDispatchCase,
	exportDispatchCase,
	getGcsAnswer,
	getNhissAnswer,
	getDispatchDeviceinfo
} from '@/api/biz/dispatchCase';
import { getPatient } from '@/api/biz/patient';
import { getDispatch } from '@/api/biz/dispatch';
import { getTradeBydispatch } from '@/api/biz/trade';

export default {
	name: 'DispatchCase',
	data() {
		return {
			radio: '1',
			resource: '',
			dialogVisible1: false,
			dialogVisible2: false,
			dialogVisible3: false,
			dialogVisible4: false,
			dialogVisible5: false,
			dialogVisible6: false,
			// gridData: [{}],
			visible: false,
			// 遮罩层
			first: true,
			second: false,
			third: false,
			loading: true,
			activeName: 'first',
			// 选中数组
			ids: [],
			// 120患者信息
			patientInfo: {},
			trade: {},
			// gcs列表
			gcsAnswers: [
				{
					value: '',
					child: {
						value: ''
					}
				},
				{
					value: '',
					child: {
						value: ''
					}
				},
				{
					value: '',
					child: {
						value: ''
					}
				}
			],
			// nhiss列表
			nhissAnswers: {},
			// 调度信息
			dispatch: {
				bizNurse: {
					name: ''
				}
			},
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 总条数
			total: 0,
			// 调度病例详细信息表格数据
			dispatchCaseList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			// 患者性别字典
			patientSexOptions: [],
			// 病情评估字典
			patientLevelOptions: [],
			// 调度状态字典
			caseStatusOptions: [],
			// 出车情况字典
			carCaseOptions: [],
			// 调度出车状态字典
			carCaseRemarkOptions: [],
			consultationMarks: [],
			// 最后出诊时间
			lastDispatchTime: [],
			previewUrl: 'http://5b0988e595225.cdn.sohucs.com/images/20180122/c833674e408e4bef9f9f50d54f5b0117.jpeg',
			picturePreview: [
				'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593980437207&di=346a9bf4c0aecf2281c9c2c311a0f559&imgtype=0&src=http%3A%2F%2Fwww.lyy99.com%2Fuploads%2F2014%2F07%2F221133011885.jpg',
				'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593980437205&di=5f38a9a5396d7c4393dfeb447fd3c112&imgtype=0&src=http%3A%2F%2F4861687.s21i-4.faiusr.com%2F4%2FABUIABAEGAAgxpOIwwUoxumS_AQwqQQ4tQM.png',
				'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593980437201&di=2529f0c10a90f619a2ee3cf9a035a7c7&imgtype=0&src=http%3A%2F%2Fpic41.nipic.com%2F20140508%2F6608733_203411145000_2.jpg',
				'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593980437200&di=40e3bb95c9f11db27caeb0717df1ab06&imgtype=0&src=http%3A%2F%2Fpic31.nipic.com%2F20130808%2F6087228_101539458168_2.jpg'
			],
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				doctorName: undefined,
				patientName: undefined,
				patientSex: undefined,
				caseStatus: undefined,
				vin: undefined,
				hospitalID: undefined,
				formStatus: undefined,
				ids: undefined,
				lastDispatchTime: undefined,
				endLastDispatchTime: undefined,
				dispatchCaseID: undefined
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				caseStatus: [
					{
						required: true,
						message: '调度状态不能为空',
						trigger: 'blur'
					}
				]
			},
			// 调度id
			dispatchID: '',
			dispatchCaseID: undefined,
			xindian: '',
			huxi: '',
			visible: false, // 默认隐藏
			nhissAnswersNum: '',
			// 计时器
			ss: '00',
			mm: '00',
			hh: '00',
			// 回放参数
			slider: 0,
			Slider: true,
			timer: null,
			count: 0,
			Count: '', // 计时器时间
			maxTime: 0, // 最大时间点
			dispatchDeviceinfo: '',
			endTime: '', // 结束时间
			// 超声播放
			hsVideoUrl: '',
			player: '',
			players: '',
			hsVideoUrls: ''
		};
	},
	computed: {
		// gcs评分分数
		gcsAnswersNuber: function() {
			// `this` 指向 vm 实例
			let num = 0;
			this.gcsAnswers.forEach((element, index) => {
				for (var i = 0; i < element.child.length; i++) {
					if (element.answer == element.child[i].id) {
						num += element.child[i].number;
					}
				}
			});
			return num;
		}
	},
	filters: {
		// nhissAnswersFilter  1:这一行的数据 2.id 3.标志位
		nhissAnswersFilter: function(value, num, n) {
			if (!value) return '';
			for (var i = 0; i < value.length; i++) {
				if (value[i].id == num) {
					if (n == '1') {
						return value[i].value;
					} else {
						return value[i].number;
					}
				}
			}
		}
	},
	created() {
		this.getList();
		this.getDicts('sys_user_sex').then(response => {
			this.patientSexOptions = response.data;
		});
		this.getDicts('patient_level').then(response => {
			this.patientLevelOptions = response.data;
		});
		this.getDicts('case_status').then(response => {
			this.caseStatusOptions = response.data;
		});
		this.getDicts('dis_car_status').then(response => {
			this.carCaseOptions = response.data;
		});
		this.getDicts('dis_car_status').then(response => {
			this.carCaseRemarkOptions = response.data;
		});
		this.getDicts('consultation_mark').then(response => {
			this.consultationMarks = response.data;
		});

		this.dispatchCaseID = this.$route.query.dispatchCaseID;

		if (this.dispatchCaseID) {
			this.handleUpdateByCaseId(this.dispatchCaseID);
		}
	},
	methods: {
    // 弹窗关闭
		handleClose(done) {
			clearInterval(this.timer);
      done();

			// this.$confirm('确认关闭？')
			// 	.then(_ => {
      //     done();
          
			// 	})
			// 	.catch(_ => {});
		},
		/** 查询调度病例详细信息列表 */
		getList() {
			this.loading = true;
			listDispatchCase(this.queryParams).then(response => {
				this.dispatchCaseList = response.rows;
				this.total = response.total;
				this.loading = false;
			});
		},
		// 患者性别字典翻译
		patientSexFormat(row, column) {
			return this.selectDictLabel(this.patientSexOptions, row.patientSex);
		},
		// 病情评估字典翻译
		patientLevelFormat(row, column) {
			return this.selectDictLabel(this.patientLevelOptions, row.patientLevel);
		},
		// 调度状态字典翻译
		caseStatusFormat(row, column) {
			return this.selectDictLabel(this.caseStatusOptions, row.caseStatus);
		},
		// 出车情况字典翻译
		carCaseFormat(row, column) {
			return this.selectDictLabel(this.carCaseOptions, row.carCase);
		},
		// 调度出车状态字典翻译
		carCaseRemarkFormat(row, column) {
			return this.selectDictLabel(this.carCaseRemarkOptions, row.carCaseRemark);
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		// 时间查询方法
		handleChangeTime() {
			this.queryParams.lastDispatchTime = this.lastDispatchTime[0];
			this.queryParams.endLastDispatchTime = this.lastDispatchTime[1];
		},
		handleClicks(tab, event) {
			if (tab.name == 'second') {
				this.second = true;
				this.first = false;
				this.third = false;
			} else if (tab.name == 'first') {
				this.second = false;
				this.first = true;
				this.third = false;
			} else {
				this.second = false;
				this.first = false;
				this.third = true;
			}
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.dispatchCaseID);
			if (this.ids.length != 0) {
				this.queryParams.ids = this.ids.join(',');
			} else {
				this.queryParams.ids = undefined;
			}
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加调度病例详细信息';
		},
		// 患者性别字典翻译
		patientSexFormat(row, column) {
			return this.selectDictLabel(this.patientSexOptions, row.patientSex);
		},
		// 病情评估字典翻译
		patientLevelFormat(row, column) {
			return this.selectDictLabel(this.patientLevelOptions, row.patientLevel);
		},
		// 调度状态字典翻译
		caseStatusFormat(row, column) {
			return this.selectDictLabel(this.caseStatusOptions, row.caseStatus);
		},
		// 出车情况字典翻译
		carCaseFormat(row, column) {
			return this.selectDictLabel(this.carCaseOptions, row.carCase);
		},
		// 调度出车状态字典翻译
		carCaseRemarkFormat(row, column) {
			return this.selectDictLabel(this.carCaseRemarkOptions, row.carCaseRemark);
		},
		// 取消按钮
		cancel() {
			this.open = false;
			this.reset();
		},
		handleClicks(tab, event) {
			if (tab.name == 'second') {
				this.second = true;
				this.first = false;
				this.third = false;
			} else if (tab.name == 'first') {
				this.second = false;
				this.first = true;
				this.third = false;
			} else {
				this.second = false;
				this.first = false;
				this.third = true;
			}
		},
		// 表单重置
		reset() {
			this.form = {
				dispatchCaseID: undefined,
				patientId: undefined,
				dispatchID: undefined,
				gcsScore: undefined,
				nhissScore: undefined,
				doctorName: undefined,
				patientName: undefined,
				patientSex: undefined,
				patientAge: undefined,
				patientMobile: undefined,
				patientAddress: undefined,
				patientLevel: undefined,
				caseStatus: undefined,
				majorCase: undefined,
				baseHelp: undefined,
				medicineSensitive: undefined,
				medicineHistory: undefined,
				bloodType: undefined,
				treatmentRecord: undefined,
				familyInheritance: undefined,
				medicineNow: undefined,
				checkResult: undefined,
				treatMeasure: undefined,
				medicine: undefined,
				carCase: undefined,
				carCaseRemark: undefined,
				treatReport: undefined,
				treatRecordID: undefined,
				vin: undefined,
				carID: undefined,
				hospital: undefined,
				hospitalID: undefined,
				time: undefined,
				uid: undefined,
				flow: undefined,
				patientLocal: undefined,
				formStatus: '0'
			};
			this.resetForm('form');
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm');
			this.handleQuery();
			this.lastDispatchTime = [];
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map(item => item.dispatchCaseID);
			if (this.ids.length != 0) {
				this.queryParams.ids = this.ids.join(',');
			} else {
				this.queryParams.ids = undefined;
			}
			this.single = selection.length !== 1;
			this.multiple = !selection.length;
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset();
			this.open = true;
			this.title = '添加调度病例详细信息';
		},
		/** 修改按钮操作 */
		handleUpdate(row) {
			this.reset();
			this.dispatchID = row.dispatchID;
			this.xindian = `http://60.205.202.107:8084/new/detail.html?dispatcherId=${this.dispatchID}&actionFlag=1&color=00184c`;
			this.huxi = `http://60.205.202.107:8084/new/respirators.html?dispatcherId=${this.dispatchID}&actionFlag=1&color=00184c`;
			const dispatchCaseID = row.dispatchCaseID || this.ids;
			getDispatchCase(dispatchCaseID).then(response => {
				this.form = response.data;
				getPatient(this.form.patientId).then(response => {
					this.patientInfo = response.data;
				});
				getDispatch(row.dispatchID).then(response => {
					let _this = this;
					this.dispatch = response.data;
					this.hsVideoUrl = this.dispatch.hsVideoUrl;
							_this.hsVideoUrls ='http://127.0.0.1:8082' + _this.dispatch.treatContent;
					// 会诊记录（视频回放）
					// setTimeout(function() {
					// 	_this.players = document.getElementById('videoElements');
					// 	// alert(_this.dispatch.treatContent)
					// 	_this.hsVideoUrls = _this.dispatch.treatContent;
					// 	let flvPlayers = flvjs.createPlayer({
					// 		type: 'mp4',
					// 		// url: 'http://47.92.143.196:8080/car_10049/video1.1594256332390.flv'
					// 		url: _this.hsVideoUrls
					// 	});
					// 	flvPlayers.attachMediaElement(videoElements);
					// 	flvPlayers.load(); //加载
					// 	_this.players.play(); //播放
					// }, 100);
					
				});
				getTradeBydispatch(row.dispatchID).then(response => {
					this.trade = response.data;
				});
				// GCS 答案  一共有三个数组 每个数组下有child属性 展示的字段为value answer为选中的childID
				// 循环之后给对应的child默认选中 且加disabled 不可进行更改
				getGcsAnswer(this.form.dispatchID).then(response => {
					this.gcsAnswers = response.data;
				});
				// NHISS 答案   有若干个数组 有多少个代表有多少个题目  和GCS一样也是answer代表每个题目选中的childID
				// 也进行默认选中 且不能进行更改 具体样式可前往蓝湖查看
				getNhissAnswer(this.form.dispatchID).then(response => {
					this.nhissAnswers = response.data;
					// console.log(this.nhissAnswers);
					let num = 0;
					this.nhissAnswers.forEach((element, index) => {
						for (var i = 0; i < element.child.length; i++) {
							if (element.answer == element.child[i].id) {
								num += Number(element.child[i].number);
							}
						}
					});
					this.nhissAnswersNum = num;
				});
				this.open = true;
				this.title = '病例详情';
				// 回放信息 ：结束时间。。。
				getDispatchDeviceinfo(20010).then(response => {
					// console.log(response.data);
					this.dispatchDeviceinfo = response.data;
				});
			
			});
		},

		/** 调整弹出详情框 */
		handleUpdateByCaseId(dispatchCaseID) {
			this.reset();

			getDispatchCase(dispatchCaseID).then(response => {
				this.form = response.data;

				this.dispatchID = this.form.dispatchID;
				getPatient(this.form.patientId).then(response => {
					this.patientInfo = response.data;
				});
				getDispatch(this.form.dispatchID).then(response => {
					this.dispatch = response.data;
				});
				getTradeBydispatch(this.form.dispatchID).then(response => {
					this.trade = response.data;
				});
				// GCS 答案  一共有三个数组 每个数组下有child属性 展示的字段为value answer为选中的childID
				// 循环之后给对应的child默认选中 且加disabled 不可进行更改
				getGcsAnswer(this.form.dispatchID).then(response => {
					this.gcsAnswers = response.data;
				});
				// NHISS 答案   有若干个数组 有多少个代表有多少个题目  和GCS一样也是answer代表每个题目选中的childID
				// 也进行默认选中 且不能进行更改 具体样式可前往蓝湖查看
				getNhissAnswer(this.form.dispatchID).then(response => {
					this.nhissAnswers = response.data;
					console.log('emmmmmmmm');
					console.log(this.nhissAnswers);
				});
				this.open = true;
				this.title = '病例详情';
			});
		},

		/** 提交按钮 */
		submitForm: function() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					if (this.form.dispatchCaseID !== undefined) {
						updateDispatchCase(this.form).then(response => {
							if (response.code === 200) {
								this.msgSuccess('修改成功');
								this.open = false;
								this.getList();
							} else {
								this.msgError(response.msg);
							}
						});
					} else {
						addDispatchCase(this.form).then(response => {
							if (response.code === 200) {
								this.msgSuccess('新增成功');
								this.open = false;
								this.getList();
							} else {
								this.msgError(response.msg);
							}
						});
					}
				}
			});
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const dispatchCaseIDs = row.dispatchCaseID || this.ids;
			this.$confirm('是否确认删除调度病例详细信息编号为"' + dispatchCaseIDs + '"的数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(function() {
					return delDispatchCase(dispatchCaseIDs);
				})
				.then(() => {
					this.getList();
					this.msgSuccess('删除成功');
				})
				.catch(function() {});
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams;
			this.$confirm('是否确认导出所有调度病例详细信息数据项?', '警告', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(function() {
					return exportDispatchCase(queryParams);
				})
				.then(response => {
					this.download(response.msg);
				})
				.catch(function() {});
		},
		//图片预览
		getPreview(e) {
			this.previewUrl = e;
		},
		// 暂停 or播放 n 1.暂停 2.播放 ; type 0.心电 1.呼吸机
		onSlider(n, type) {
			switch (n) {
				case 1:
					// 暂停
					this.Slider = false;
					var e = '1';
					if (type == 0) {
						document.getElementById('xindian').contentWindow.postMessage(e, '*');
					} else if (type == 1) {
						document.getElementById('huxi').contentWindow.postMessage(e, '*');
					}
					clearInterval(this.timer);
					break;
				case 2:
					this.Slider = true;
					var e = '2';
					if (type == 0) {
						document.getElementById('xindian').contentWindow.postMessage(e, '*');
					} else if (type == 1) {
						document.getElementById('huxi').contentWindow.postMessage(e, '*');
					}
					clearInterval(this.timer);
					this.playSetInterval(this.Count);
					break;
				default:
					break;
			}
		},
		// 格式化
		formatTooltip(val) {
      this.Count = val;
			clearInterval(this.timer);
			this.playSetInterval(val);
			return val;
		},
		//拖动时间轴
		sliderChange(n) {
			if (this.dispatchDeviceinfo != '') {
				let time = 0;
				if (n == 1) {
					time = Number(new Date(this.dispatchDeviceinfo[0].startTime).getTime()) + this.Count;
					var e = dateFormat('YYYYmmddHHMMSS', new Date(time));
					setTimeout(function() {
						document.getElementById('xindian').contentWindow.postMessage(e, '*');
					}, 30);
				} else if (n == 2) {
					time = Number(new Date(this.dispatchDeviceinfo[1].startTime).getTime()) + this.Count;
					var e = dateFormat('YYYYmmddHHMMSS', new Date(time));
					setTimeout(function() {
						document.getElementById('huxi').contentWindow.postMessage(e, '*');
					}, 30);
				}
				function dateFormat(fmt, date) {
					let ret;
					let opt = {
						'Y+': date.getFullYear().toString(), // 年
						'm+': (date.getMonth() + 1).toString(), // 月
						'd+': date.getDate().toString(), // 日
						'H+': date.getHours().toString(), // 时
						'M+': date.getMinutes().toString(), // 分
						'S+': date.getSeconds().toString() // 秒
						// 有其他格式化字符需求可以继续添加，必须转化成字符串
					};
					for (let k in opt) {
						ret = new RegExp('(' + k + ')').exec(fmt);
						if (ret) {
							fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0'));
						}
					}
					return fmt;
				}
			} else {
				return;
			}
		},
		//计时器
		playSetInterval(n) {
			clearInterval(this.timer);
			const that = this;
			let count = null; //timer变量记录定时器setInterval的返回值
			if (n) {
				count = n;
			}
			that.timer = setInterval(function() {
				count++;
				that.Count = count;
				that.slider = count;
				// 需要改变页面上时分秒的值
				that.ss = that.showNum(count % 60);
				that.mm = that.showNum(parseInt(count / 60) % 60);
				that.hh = that.showNum(parseInt(count / 60 / 60));
				// that.formatTooltip()
				if (that.Count == that.endTime) {
					clearInterval(this.timer);
        }
        console.log(count);
			}, 1000); //封装一个处理单位数字的函数
		},
		showNum(num) {
			if (num < 10) {
				return '0' + num;
			}
			return num;
		},
		// 弹窗关闭
		closeDialog() {
			clearInterval(this.timer);
			this.Count = 0;
			this.slider = 0;
			this.hh = 0;
			this.mm = 0;
			this.ss = 0;
		},
		// 心电or呼吸机播放详情 1.心电 2.呼吸
		palyerDetail(n) {
				clearInterval(this.timer);
        
			if (n == 1) {
				if (this.dispatchDeviceinfo[0].type == 1) {
          this.maxTime = Number(this.dispatchDeviceinfo[0].interval);
        } else if(this.dispatchDeviceinfo.length > 1 && this.dispatchDeviceinfo[1].type == 1) {
					this.maxTime = Number(this.dispatchDeviceinfo[1].interval);
				}
			} else if (n == 2) {
				if (this.dispatchDeviceinfo[0].type == 2) {
					this.maxTime = Number(this.dispatchDeviceinfo[0].interval);
				} else if (this.dispatchDeviceinfo.length > 1 && this.dispatchDeviceinfo[1].type == 2) {
					this.maxTime = Number(this.dispatchDeviceinfo[1].interval);
				}
			}
			let ss = this.showNum(this.maxTime % 60);
			let mm = this.showNum(parseInt(this.maxTime / 60) % 60);
			let hh = this.showNum(parseInt(this.maxTime / 60 / 60));
			this.endTime = hh + '：' + mm + '：' + ss;
		},
		// 超声播放
		onplayer() {
			if (this.hsVideoUrl != null) {
				setTimeout(function() {
					this.player = document.getElementById('videoElement');
					console.log(this.hsVideoUrl);
					if (flvjs.isSupported()) {
						let flvPlayer = flvjs.createPlayer({
							type: 'flv',
							// url: 'http://47.92.143.196:8080/car_10049/video1.1594256332390.flv'
							url: this.hsVideoUrl
						});
						flvPlayer.attachMediaElement(videoElement);
						flvPlayer.load(); //加载
						this.player.play(); //播放
					}
				}, 100);
			}
		}
	}
};
</script>
<style scoped="scoped">
.ckxq {
	color: black;
}

/* .GCS {
  background-color: white;
} */
/* el-dialog {
  background-color: white;
} */
/* .el-dialog {
  height: 1000px;
  /* width: 50%; */
/* } */
element.style {
	clear: both;
}

/* .field-diagnosis-box {
            text {
              display: inline-block;
              min-width: 50px;
              color: #3183e0;
              text-align: right;
              vertical-align: middle;
              float: left;
              font-size: 11px;
              line-height: 30px;
              padding: 0 12px 0 0;
              box-sizing: border-box;
            }}, */
.lip1 {
	font-size: 14px;
	/* margin-top: -40px; */
}

.left {
	/* margin-left: 10px; */
	margin-top: -20px;
	color: #409eff;
	/* margin-right: -25px; */
	/* margin-left: 10px; */
	font-size: 14px;
}
.gcs-cont {
	display: flex;
	justify-content: space-around;
	height: 270px;
	overflow-y: auto !important;
}
.gcs-cont > div {
	flex: 1;
}

.radio {
	color: black;
	margin-top: 5px;
	display: block;
}

.button1 {
	background: rgba(245, 246, 250, 1);
	width: 98%;
	height: 40px;
	line-height: 40px;
	margin-top: 25px;
	/* margin-bottom: -20px; */
	float: left;
}
.button1 > p {
	margin: 0 0 0 10px;
}
.pfx {
	margin-bottom: 20px;
}

.pfx1 {
	margin-left: 15px;
}

.pfx2 {
	margin-left: 130px;
}

.pfx3 {
	margin-left: 165px;
}

.pfx6 {
	margin-left: 12px;
	margin-top: 15px;
}

.pfx4 {
	margin-left: 100px;
	margin-top: 15px;
}

.pfx5 {
	margin-left: 200px;
	margin-top: 15px;
}

.box .title {
	float: left;
	margin-left: 20px;
	font-size: 16px;
	line-height: 18px;
	color: #3183e0;
	padding-bottom: 1.25rem;
	padding-top: 1.25rem;
}

.line {
	float: left;
}

.active-value {
	float: left;
	margin-left: 15px;
	padding-top: 1.25rem;
	font-size: 16px;
	line-height: 18px;
}

.second-title {
	clear: left;
}

.box {
	width: 71.875rem;
	height: 260px;
	background-color: #f5f6fa;
	padding-bottom: 1.875rem;
}

.box > div:nth-child(2) {
	overflow: hidden;
}

.thred-title {
	float: none;
}

.tab {
	float: left;
	margin-left: 0.625rem;
	margin-top: 0.9375rem;
	width: 72px;
	font-size: 16px;
	font-family: SourceHanSansCN-Regular, SourceHanSansCN;
	font-weight: 400;
	color: rgba(136, 136, 136, 1);
	line-height: 27px;
}

.actives {
	color: #1890ff !important;
	border-bottom: 0.125rem solid #1890ff;
}

.tabs {
	overflow: hidden;
	padding-left: 1.9375rem;
}

.right-tabbox-newnotice >>> .el-tabs__nav-wrap::after {
	position: static !important;
}

.patient-info {
	width: auto;
	height: 8.25rem;
	background-color: #13ce66;
}

.patient-title {
	height: 18px;
	font-size: 18px;
	font-family: SourceHanSansCN-Medium, SourceHanSansCN;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	line-height: 18px;
	margin: 37px 0;

	.title {
		padding: 0;
	}
}

/*  */
.patint-infos {
	margin: 25px 0;
}

.patint-info {
	margin: 35px 0 25px 0;
}

.patint-box {
	overflow: hidden;
	margin-bottom: 20px;
}

.grid-content {
	background-color: #1890ff;
}

.patint-box-title {
	padding: 0 !important;
	width: 90px;
	color: #3183e0;
	font-size: 16px;
	line-height: 16px;
	font-weight: 500;
}

.patint-box-conter {
	font-size: 16px;
	line-height: 16px;
	padding: 0 !important;
}

.patint-box-conter span {
	display: inline-block;
	color: #3183e0;
	margin: 0 15px;
}

.patint-box-title span {
	display: inline-block;
	margin: 0 15px;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
}

.widthadd {
	width: 100px;
}

.widthadds {
	width: 75%;
}

.el-form--inline {
	background: #ffffff;
	padding: 20px 20px 0px 20px;
}

/* 查询区 */
/* 起始时间 */
.el-input__inner {
	width: 240px;
}

/* 选择框 */
.el-select--small {
	width: 130px;
}

/* 输入框input */
.el-input--small {
	font-size: 13px;
	width: 130px;
}

/* 查询区 end */
/* 分页 */
.pagination-container {
	height: 80px;
	margin-top: 0px;
	padding: 23px 20px !important;
}

/* 分页  end */
/* 弹窗 */
.el-dialog__body {
	padding: 30px 0px;
}

.con-wind {
	float: left;
	width: 100%;
	overflow: hidden;
}

.con-sher {
	float: left;
	background: #3183e0;
	width: 100%;
	height: auto;
	padding: 10px 20px;
}

.con-heade-text {
	color: #ffffff;
	font-size: 14px;
}

.con-heade-text span {
	float: left;
	margin-right: 40px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.con-heade-text .btn-draft-lev {
	background: #1666c1;
	border: 0px;
	float: right;
}

.con-heade-text .btn-draft-lev:hover {
	background: #409eff;
	border: 0px;
}

.con-list {
	float: left;
	width: 100%;
}

.con-list .ul {
	float: left;
	width: 100%;
}

.con-list .ul .title {
	float: left;
	width: 100%;
	margin: 40px 0 0px 0px;
}

.con-list .ul .title .p {
	font-size: 16px;
	color: #333333;
	text-align: left;
}

.con-list .ul .title .p-before {
	float: left;
	background: #3183e0;
	width: 3px;
	height: 12px;
	margin: 3px 5px 0 0;
}

.con-list .ul .lip {
	float: left;
	color: #888888;
	font-size: 14px;
	margin: 20px 0 0 0px;
}

.con-list .ul .lip span {
	color: #333333;
	float: right;
	margin-left: 15px;
	margin-right: 40px;
}

.con-list .ul .lip .btn-text {
	margin-right: 0px;
}

.con-list .ul .pew-img {
	float: left;
	width: 100%;
}

.con-list .ul .pew-img .img-max {
	float: left;
	background: #f7f7f7;
	width: 460px;
	height: 260px;
	margin: 20px 0 0 0px;
}

.con-list .ul .pew-img .img-max img {
	width: 460px;
	height: 260px;
}

.con-list .ul .pew-img .img-min {
	width: 200px;
	height: 280px;
	overflow: auto;
	padding: 20px 10px 0 0;
}

.con-list .ul .pew-img .img-min .li {
	float: left;
	background: #f7f7f7;
	width: 160px;
	height: 80px;
	margin-bottom: 10px;
	margin-left: 10px;
	overflow: hidden;
	cursor: pointer;
}

.con-list .ul .pew-img .img-min .li img {
	width: 160px;
	height: 80px;
}

.con-list .ul .set-p {
	float: left;
	width: 100%;
	margin-top: 20px;
}

.step00,
.step01,
.step02,
.step03,
.step04,
.step05,
.step06,
.step07,
.step08 {
	width: 35px;
	height: 35px;
	background-size: 100% 100%;
}

.step00 {
	background-image: url('~@/assets/icons/step/icon_step-1-1.png');
}

.step01 {
	background-image: url('~@/assets/icons/step/icon_step-2-2.png');
}

.step02 {
	background-image: url('~@/assets/icons/step/icon_step-3-3.png');
}

.step03 {
	background-image: url('~@/assets/icons/step/icon_step-4-4.png');
}

.step04 {
	background-image: url('~@/assets/icons/step/icon_step-5-5.png');
}

.step05 {
	background-image: url('~@/assets/icons/step/icon_step-6-6.png');
}

.step06 {
	background-image: url('~@/assets/icons/step/icon_step-7-7.png');
}

.step07 {
	background-image: url('~@/assets/icons/step/icon_step-8-8.png');
}

.step08 {
	background-image: url('~@/assets/icons/step/icon_step-9-9.png');
}

.is-finish .step00 {
	background-image: url('~@/assets/icons/step/icon_step-1.png');
}

.is-finish .step01 {
	background-image: url('~@/assets/icons/step/icon_step-2.png');
}

.is-finish .step02 {
	background-image: url('~@/assets/icons/step/icon_step-3.png');
}

.is-finish .step03 {
	background-image: url('~@/assets/icons/step/icon_step-4.png');
}

.is-finish .step04 {
	background-image: url('~@/assets/icons/step/icon_step-5.png');
}

.is-finish .step05 {
	background-image: url('~@/assets/icons/step/icon_step-6.png');
}

.is-finish .step06 {
	background-image: url('~@/assets/icons/step/icon_step-7.png');
}

.is-finish .step07 {
	background-image: url('~@/assets/icons/step/icon_step-8.png');
}

.is-finish .step08 {
	background-image: url('~@/assets/icons/step/icon_step-9.png');
}

.ul-fte {
	float: left;
	background: #3183e0;
	width: 100%;
	padding: 15px;
	font-size: 16px;
	color: #fff;
	margin-top: 30px;
	margin-bottom: 20px;
}

.ul-fte .p-text-left {
	float: left;
}

.ul-fte .p-text-left span {
	margin-right: 20px;
}

.ul-fte .p-text-right {
	float: right;
}

.ul-fte .p-text-right span {
	margin-right: 20px;
}
.pfxs {
	display: flex;
	transition: all 0.8s;
	width: 100%;
}
.pfxs > span {
	flex: 1;
}
.pfx {
	display: flex;
}
.pfx > div:nth-child(1),
.pfx > div:nth-child(2) {
	flex: 1;
}
.pfx > div:nth-child(3) {
	width: 80px;
	text-align: center;
	padding-left: 20px;
	box-sizing: border-box;
}
.pfxs-list-box {
	max-width:535px;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 16px;
	line-height: 24px;
	cursor: pointer;
}
.pfxs-list-box {
	/* flex: 1; */
	width: 100%;
}

.pfxs div:nth-child(3) {
	width: 80px !important;
	text-align: right;
	padding-right: 14px !important;
	box-sizing: border-box;
}
.pfxs:hover {
	background-color: #e3e3e3;
}
.xindain-footer {
	width: calc(100% + 40px);
	height: 80px;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0px -6px 10px 0px rgba(0, 0, 0, 0.04);
	position: relative;
	margin: 20px 0 0 -20px;
}
.xindain-footer > img {
	float: left;
	margin: 20px 0 0 20px;
}

.xindain-footer-slider {
	width: 910px;
	float: left;
	margin: 28px 0 0 40px;
}
.xindain-footer-slider > .palyTime {
	float: left;
	line-height: 38px;
	margin-right: 20px;
}
.xindain-footer-slider > div:nth-child(3) {
	float: right;
}
.xindain-footer-slider > .palySlider {
	float: left;
	width: 700px;
}
</style>
<style>
.el-step__main .el-step__title {
	font-size: 13px !important;
}
iframe {
	width: 100%;
	height: 330px;
}
/* #xindian {
	width: 100%;
	height: 330px;
} */
.customWidth{
  min-width:1500px !important;
} 
</style>
